<script>
export default {
  name: "EditMyPlan",
  data(){
    return{
      newPlanName:null,
      showing:false,
      planList:[],
    }
  },
  methods:{
    showSelf(planList){
      this.planList = planList;
      this.showing = true;
    },
    hideSelf(){
      this.showing = false;
    },
    newTarget(){
      if (this.newPlanName === null || this.newPlanName.length < 1){
        this.$message('请先输入新计划名称')
        return false;
      }
      window.bound.setNewPlan(this.newPlanName);
      this.hideSelf();
    },
    dateHandler(startTime,endTime){
      //startTime为'2023-12-01-0'
      //endTime为'2023-12-10-2'
      //返回值为'2023年12月01日上午-2023年12月10日晚上'
      // 解析日期和时间
      const startParts = startTime.split('-');
      const endParts = endTime.split('-');

      // 提取年、月、日和时段
      const startYear = startParts[0];
      const startMonth = startParts[1];
      const startDay = startParts[2];
      const startPeriod = this.getPeriod(startParts[3]);

      const endYear = endParts[0];
      const endMonth = endParts[1];
      const endDay = endParts[2];
      const endPeriod = this.getPeriod(endParts[3]);

      // 构建最终字符串
      const result = `${startYear}-${startMonth}-${startDay}-${startPeriod} 至 ${endYear}-${endMonth}-${endDay}-${endPeriod}`;

      return result;
    },
    getPeriod(periodCode) {
      switch (periodCode) {
        case '0':
          return '上午';
        case '1':
          return '下午';
        case '2':
          return '晚上';
        default:
          return '';
      }
    },

  }
}
</script>

<template>
  <transition name="fade" mode="out-in">
    <div v-if="showing" class="edit-my-plan">
      <button @click="hideSelf" class="close-btn">
        <img src="@/assets/close.png">
      </button>
      <!--已有计划-->
      <div class="my-plan-container">
        <div class="h1">当前城市已有计划：</div>
        <div class="child-block">
          <div class="my-table">
            <div class="my-table-line" v-for="(item, index) in planList" :key="index">
              <div>{{ item.planName }}</div>
              <div>{{ dateHandler(item.startTime,item.endTime) }}</div>
            </div>
          </div>
        </div>
      </div>
      <!--新增计划-->
      <div class="new-plan-container">
        <div class="h1">新增计划：</div>
        <div class="child-block child-line">
          <div>计划名：</div>
          <el-input v-model="newPlanName" size="small" style="margin: 0 8px"/>
          <el-button @click="newTarget" size="small">确定</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<style scoped>
  .edit-my-plan{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    height: 240px;
    background-color: #f8f8f8;
    box-shadow: 0 0 12px rgba(0,0,0,0.4);
    border-radius: 4px;
  }
  .my-plan-container{
    position: absolute;
    left: 12px;
    top: 12px;
    right: 12px;
    bottom: 80px;
  }
  .new-plan-container{
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 64px;
  }
  .h1{
    font-size: 14px;
    font-weight: bold;
  }
  .child-block{
    position: absolute;
    top: 24px;
    right: 4px;
    left: 4px;
    bottom: 4px;
  }
  .child-line{
    display: flex;
    align-items: center;
    white-space: nowrap;
    justify-content: space-between;
    font-size: 14px;
  }
  .my-table{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: scroll;
  }
  .my-table-line{
    font-size: 14px;
    display: flex;
    white-space: nowrap;
    align-items: center;
    margin: 4px 0;
    justify-content: space-between;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active 在 <2.1.8 中以及被定义为 .fade-leave-to */ {
    opacity: 0;
  }
  .close-btn{
    width: 20px;
    height: 20px;
    position: absolute;
    right: 4px;
    top: 4px;
    padding: 0;
    border: none;
    background-color: transparent;
  }
  .close-btn img{
    width: 100%;
    height: 100%;
  }
</style>